<template>
  <header>
    <h2>我的题库列表</h2>
  </header>
  <div class="search-box">
    <el-select placeholder="请选择分类" v-model="classType" clearable @change="initTableData">
      <el-option label="项目管理集成师" :value="1" />
    </el-select>
    <el-select placeholder="是否上架" v-model="isPublic" clearable @change="initTableData">
      <el-option label="否" :value="false" />
      <el-option label="是" :value="true" />
    </el-select>
    <el-input placeholder="题目名称" v-model="titleName" />
    <el-button type="primary" @click="initTableData">搜索</el-button>
  </div>
  <div class="add-title-box">
    <el-button type="primary" @click="addTitile">添加题目</el-button>
  </div>
  <el-table border :data="tableData" v-loading="loading">
    <el-table-column type="index" width="50" align="center" />
    <el-table-column label="题目" show-overflow-tooltip align="center" prop="titleName" />
    <el-table-column label="所属分类" show-overflow-tooltip align="center" width="200">
      <template #default="props">
        <span>{{ props.row.classType ? '项目管理集成师' : '' }}</span>
      </template>
    </el-table-column>
    <el-table-column label="是否上架" show-overflow-tooltip align="center" width="140">
      <template #default="{ row }">
        <el-switch
          v-model="row.isPublic"
          @change.self="isPublicChange(row)"
          active-value="true"
          inactive-value="false"
          active-text="是"
          inactive-text="否"
        />
      </template>
    </el-table-column>
    <el-table-column label="创建时间" show-overflow-tooltip align="center" prop="createDate" width="150" />
    <el-table-column label="备注" show-overflow-tooltip align="center" prop="ansDes" />
    <el-table-column label="操作" align="center" width="150">
      <template #default="{ row }">
        <el-button type="primary" @click="edit(row)" size="mini">修改</el-button>
        <el-button type="danger" @click="del(row)" size="mini">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    v-model:currentPage="pagination.page"
    :layout="pagination.layout.join(',')"
    :total="pagination.total"
    :page-size="pagination.size"
    :page-sizes="pagination.pageSize"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  <operator-title
    v-model:show="showDialog"
    :operatorType="operatorType"
    :chooseContentData="chooseContentData"
    @initTableFunc="initTableData"
  />
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
  import OperatorTitle from '@/modules/home/operatorTitle.vue'
  import { getTitleList, deleteTitle } from '@/api/user'
  export default defineComponent({
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Home',
    components: {
      OperatorTitle
    },
    setup() {
      const state: any = reactive({
        classType: null,
        isPublic: null,
        titleName: null,
        showDialog: false,
        loading: false,
        tableData: [],
        chooseContentData: {},
        operatorType: false,
        pagination: {
          layout: ['prev', 'pager', 'next', 'total', 'sizes'],
          total: 0,
          page: 1,
          size: 10,
          pageSize: [10, 20, 30, 50]
        }
      })
      const { proxy } = getCurrentInstance()
      onMounted(() => {
        initTableData()
      })
      const initTableData = async () => {
        state.loading = true
        let params = {
          page: state.pagination.page,
          pageSize: state.pagination.size,
          titleName: state.titleName || '',
          classType: state.classType || '',
          isPublic: state.isPublic || ''
        }
        let { code, data } = await getTitleList(params)
        if (code == 200) {
          state.tableData = (data && data.data) || []
          state.pagination.total = data.total
        }
        setTimeout(() => {
          state.loading = false
        }, 500)
      }
      //修改数据逻辑
      const edit = (row) => {
        state.chooseContentData = row
        state.operatorType = true
        state.showDialog = true
      }
      //删除数据功能
      const del = ({ questionId }) => {
        ;(proxy as any)
          .$confirm('是否该条记录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(async () => {
            let { code } = await deleteTitle(questionId)
            if (code == 200) {
              ;(proxy as any).$message({
                type: 'success',
                message: '删除成功!'
              })
              initTableData()
            }
          })
      }
      //添加题目功能
      const addTitile = () => {
        state.showDialog = true
        state.operatorType = false
      }
      const handleSizeChange = (val) => {
        state.pagination.size = val
        initTableData()
      }
      const handleCurrentChange = (val) => {
        state.pagination.page = val
        initTableData()
      }
      const isPublicChange = (row) => {
        console.log(row)
      }
      return {
        edit,
        del,
        addTitile,
        ...toRefs(state),
        initTableData,
        handleSizeChange,
        handleCurrentChange,
        isPublicChange
      }
    }
  })
</script>

<style lang="scss" scoped>
  .search-box {
    margin: 15px 0;
    .el-select {
      width: 200px;
    }
    .el-input {
      width: 200px;
    }
    .el-select,
    .el-input {
      margin: 0 8px;
    }
  }
  .add-title-box {
    text-align: right;
    margin-right: 15px;
    margin: 10px 15px 10px 0;
  }
  .el-pagination {
    margin-top: 10px;
    text-align: right;
  }
</style>
